<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript " src="../js/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
    <link href="../bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link th:href="@{css/css-1.css}">
    <style type="text/css">
        .content {
            margin-top: 20px;
        }

        .color {
            background-color: #ffffff;
        }

        h3 {
            text-align: center;
        }

        #search {
            float: left;
            margin: 10px;
        }

        #search div {
            margin-right: 5px;
        }

        #add_del {
            float: right;
            margin: 10px;
        }

        #add_del a {
            margin-left: 5px;
        }

        td, th {
            text-align: center;
        }

        #paging_info {
            font-size: 15px;
            margin-left: 10px;
            line-height: 35px;
        }
    </style>
</head>
<script type="text/javascript" th:inline="javascript">
    $(function () {
        $("button").click(function (event) {
            event.preventDefault()
        });
        $("#modSubmit").click(function (event) {
            modSubmit();
        })
        // 注销

        $("#addSubmit").click(function () {
            addUserSubmit()
        })
        $("#delSelected").click(function () {
            deleteSelected();
        })


    })

    // 根据条件查询用户
    function getUsersByCondition(name, loginAct, email) {

        name = $("#con-name").val()
        loginAct = $("#con-loginAct").val()
        email = $("#con-email").val()


        window.location.href="/admin/userList?name="+name+"&loginAct="+loginAct+"&email="+email;

        // $.ajax({
        //     url: "../admin/userList",
        //     data: {
        //         "name": name,
        //         "loginAct": loginAct,
        //         "email": email
        //     },
        //     type: "post",
        //     dataType: "json",
        //     success: function (data) {
        //         if (data.success) {
        //             $("#users").html(" ")
        //             $("#hidden-name").val(name);
        //             $("#hidden-loginAct").val(loginAct)
        //             $("#hidden-email").val(email)
        //             myHtml(data)
        //         }
        //     }
        // })
    }

    // 根据id删除用户
    function deleteUser(id) {
        var msg = "您真的确定要删除吗？\n\n请确认！";
        if(confirm(msg)==true){
            $.ajax({
                url: "/admin/deleteUserById",
                data: {
                    "id": id,
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    if (data.success) {
                        getUsersByCondition();
                    }
                }
            })
        }


    }

    function modUser(id) {
        $.ajax({
            url: "/admin/getUserById",
            data: {
                "id": id
            },
            type: "post",
            dataType: "json",
            success: function (data) {
                $("#myModal2").find('input')[0].value = data.user.id
                $("#myModal2").find('input')[1].value = data.user.loginAct
                $("#myModal2").find('input')[2].value = data.user.name
                $("#myModal2").find('input')[3].value = data.user.loginPwd
                $("#myModal2").find('input')[4].value = data.user.email

                $("#myModal2").modal("show");
            }
        })
    }

    function modSubmit() {
        $("#myModal2").modal("hide");
        var id = $("#myModal2").find('input')[0].value;
        var loginAct = $("#myModal2").find('input')[1].value;
        var name = $("#myModal2").find('input')[2].value;
        var loginPwd = $("#myModal2").find('input')[3].value;
        var email = $("#myModal2").find('input')[4].value;
        $.ajax({
            url: "/admin/modUserById",
            data: {
                "id": id,
                "loginAct": loginAct,
                "name": name,
                "loginPwd": loginPwd,
                "email": email
            },
            type: "post",
            success: function (data) {
                if (data.success){
                    alert("修改成功")
                    var name = $("#hidden-name").val()
                    var loginAct = $("#hidden-loginAct").val()
                    var email = $("#hidden-email").val()
                    getUsersByCondition(name, loginAct, email)
                }else {
                    alert("修改失败")
                }
            }
        })
    }

    //
    // function getUsers() {
    //     $.ajax({
    //         url: "../user/getUsers",
    //         type: "post",
    //         dataType: "json",
    //         success: function (data) {
    //             if (data.success) {
    //                 myHtml(data)
    //             }
    //         }
    //     })
    // }

    // function myHtml(data) {
    //     let html = "";
    //     $("#users").html(html);
    //     $.each(data.users, function (i, n) {
    //         html += "<tr><td><input type='checkbox' name='id' value='" + n.id + "' class='content_Cb'></td>";
    //         html += "<td>" + (i + 1) + "</td>" +
    //             "<td>" + n.name + "</td>" +
    //             "<td>" + n.loginAct + "</td>" +
    //             "<td>" + n.email + "</td>" +
    //             "<td>" + n.loginAct + "</td>";
    //         html += "<td><a class='btn btn-default btn-sm  btn-primary btn-lg' id='modBtn' onclick='modUser(\"" + n.id + "\")'>修改</a>&nbsp;";
    //         html += "<a class='btn btn-default btn-sm'  onclick='deleteUser(\"" + n.id + "\")'>删除</a></td></tr>";
    //     });
    //     $("#users").html(html);
    //
    // }

    function addUserSubmit() {
        var name = $.trim($("#add-name").val())
        var email = $.trim($("#add-email").val())
        var loginAct = $.trim($("#add-loginAct").val())
        var loginPwd = $.trim($("#add-loginPwd").val());
        $("#myModal1").modal("hide")
        $.ajax({
            url: "/user/register",
            type: "post",
            data: {
                "name": name,
                "loginAct": loginAct,
                "loginPwd": loginPwd,
                "email": email
            },
            dataType: "json",
            success: function (data) {
                $("#add-name").val("")
                $("#add-email").val("")
                $("#add-loginAct").val("")
                $("#add-loginPwd").val("")

                // var name = $("#hidden-name").val()
                // var loginAct = $("#hidden-loginAct").val()
                // var email = $("#hidden-email").val()
                getUsersByCondition(name, loginAct, email)
            }
        })

    }

    function deleteSelected() {
        var option = $(":checked");
        var checkedId = "";
        var boo = true;
        ids = new Array()

        //拼接除全选框外,所有选中的id,
        for (var i = 0, len = option.length; i < len; i++) {
            if (boo) {
                if (option[i].id == 'firstCb') {
                    boo = true;
                } else {
                    boo = false;
                    checkedId += option[i].value;
                    // ids[i] = option[i].value
                }
            } else {
                checkedId += "," + option[i].value;
                // ids[i] = option[i].value

            }
        }


        if (checkedId == null||checkedId == ""){
            alert("请选择记录")
        }else {
            if(confirm("确认删除吗")==true){
                $.ajax({
                    type:"post",
                    url:'/admin/deleteUserByIds',
                    data : {
                        "ids":checkedId
                    },
                    dataType:"json",
                    success:function (data) {
                        if (data.success){
                            alert("删除成功！")
                            getUsersByCondition()
                        }else {
                            alert("删除失败！")
                        }

                    }
                })
            }
        }
        // layer.confirm('确认要删除吗？', function (index) {


            // <%--$.ajax({--%>
            // <%--    type: "post",--%>
            // <%--    url:'${base}admin/doFalseDelete',--%>
            // <%--    data : {--%>
            // <%--        "checkedId":checkedId--%>
            // <%--    },--%>
            // <%--    dataType:"json",--%>
            // <%--    success : function(map) {--%>
            // <%--        parent.layer.msg(map.message,{icon: 6,time:1000});--%>
            // <%--        setTimeout("serachFromSubmit()", 1000);--%>
            // <%--    },error:function(code){--%>
            // <%--        parent.layer.msg('操作失败!',{icon: 5,time:1000});--%>
            // <%--    }--%>
        //     // <%--});--%>
        // });

    }
</script>
<body style="background-color: #F7F8FA;">
<nav class="navbar navbar-default color" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand">BBS</a>
        </div>
        <div class="col-lg-6" style="width: auto;">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/admin/userList">用户管理</a></li>
                <li><a href="/admin/topicList">帖子管理</a></li>
            </ul>
        </div>
        <div class="col-lg-2 col-lg-offset-6"  style="width: 20%">
            <ul class="nav navbar-nav">
                <li th:if="*{session.admin.name != null}"><a th:text="'欢迎你,'+ *{session.admin.name}"
                                                     style="color: red"></a></li>
                <li><a href="/admin/logout" class="logoutBtn">注销</a></li>
            </ul>
        </div>

    </div>

</nav>

<input type="hidden" id="hidden-name">
<input type="hidden" id="hidden-loginAct">
<input type="hidden" id="hidden-email">

<div class="container-fluid content color main" style="width: 80%;min-height: 500px">
    <div class="row">
        <div class="col-lg-12 ">
            <h2><span class="glyphicon glyphicon-list" aria-hidden="true"></span> 用户管理 </h2>
            <hr>
        </div>
        <!--分页展示用户内容-->

        <div class="container">

            <h3>用户信息列表</h3>


            <form id="search" class="form-inline" action="" method="post">
                <div class="form-group">
                    <label for="exampleInputName2">姓名</label>
                    <input type="text" name="name" value="" class="form-control" id="con-name">
                </div>
                <div class="form-group">
                    <label for="exampleInputName3">账户</label>
                    <input type="text" name="address" value="" class="form-control" id="con-loginAct">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">Email</label>
                    <input type="text" name="email" value="" class="form-control" id="con-email">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-default" onclick="getUsersByCondition()">查询</button>
                </div>
            </form>

            <div id="add_del">
                <a class="btn btn-primary btn-sm  btn-primary btn-lg" href="" data-toggle="modal"
                   data-target="#myModal1">添加用户</a>
                <a class="btn btn-primary" href="javascript:void(0);" id="delSelected">删除选中</a>
            </div>

            <form id="form" action="" method="post">
                <table border="1" class="table table-bordered table-hover">
                    <thead>
                    <tr class="success">
                        <th style="text-align: center"><input type="checkbox" id="firstCb"></th>
                        <th style="text-align: center">编号</th>
                        <th style="text-align: center">姓名</th>
                        <th style="text-align: center">账户</th>
                        <th style="text-align: center">邮箱</th>
                        <th style="text-align: center">密码</th>
                        <th style="text-align: center">操作</th>
                    </tr>
                    </thead>
                    <tbody id="users">
                    <tr th:each="user:${users}">
                        <td><input type='checkbox' name='id' class='content_Cb' th:value="${user.id}"></td>
                        <td th:text="${user.id}"></td>
                        <td th:text="${user.name}"></td>
                        <td th:text="${user.loginAct}"></td>
                        <td th:text="${user.email}"> </td>
                        <td th:text="${user.loginPwd}"></td>
                      <td><a class='btn btn-default btn-sm  btn-primary btn-lg' id='modBtn'  th:th:onclick="|javascript:modUser('${user.id}')|">修改</a>&nbsp;
                          <a class='btn btn-default btn-sm'  th:th:onclick="|javascript:deleteUser('${user.id}')|">删除</a></td></tr>
                    </tbody>
                </table>
            </form>



        </div>
    </div>

</div>


<div class="modal-footer" style="margin-top: 10px">
    <div align="center"><a>Powered by 斌斌家豪涛顺 &nbsp;&nbsp;联系我们</a></div>
</div>

<div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        添加用户
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" method="post" action="">

                        <div class="form-group">
                            <label class="col-sm-2 control-label">账户</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="loginAct" placeholder="账户" value=""
                                       id="add-loginAct">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" placeholder="姓名" value=""
                                       id="add-name">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="loginPwd" placeholder="密码"
                                       id="add-loginPwd">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" name="email" placeholder="邮箱" value=""
                                       id="add-email">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group" id="btn1" style="text-align: center">
                            <input class="btn btn-primary" type="button" id="addSubmit" value="提交"/>
                            <input class="btn btn-default" type="reset" value="重置"/>

                        </div>

                    </form>


                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>



    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        用户修改
                    </h4>
                </div>
                <div class="modal-body">

                    <form class="form-horizontal" method="post" action="">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">id</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="id" placeholder="id" value="1" readonly>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">账户</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="loginAct" placeholder="账户" value="">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" placeholder="姓名" value="">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="loginPwd" placeholder="密码" value="">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="email" placeholder="邮箱" value="">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group" id="btn2" style="text-align: center">
                            <input class="btn btn-primary" type="button" id="modSubmit" value="提交"/>
                            <input class="btn btn-default" type="reset" value="重置"/>

                        </div>

                    </form>


                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>


    <script type="text/javascript" th:inline="javascript">
        var fitstCb = document.getElementById('firstCb');
        var content_Cbs = document.getElementsByClassName("content_Cb");
        fitstCb.onclick = function () {
            var content_Cbs = document.getElementsByClassName("content_Cb");
            console.log(this.checked);
            if (this.checked) {
                console.log("点击了复选框");
                console.log(content_Cbs.length);
                for (let i = 0; i < content_Cbs.length; i++) {
                    console.log(i);
                    content_Cbs[i].checked = true;    //每个复选框设置为勾选状态
                    content_Cbs[i].className = 'content_Cb selected';    //增加class
                }
            } else {
                console.log("点击了复选框");
                console.log(content_Cbs.length);
                for (let i = 0; i < content_Cbs.length; i++) {
                    console.log(i);
                    content_Cbs[i].checked = false;    //每个复选框设置为勾选状态
                    content_Cbs[i].className = 'content_Cb';    //增加class
                }
            }
        }


        // 取消一个复选框，全选复选框更改
        for (let j = 0; j < content_Cbs.length; j++) {
            if (j > content_Cbs.length) {
                j = 0;
            }
            content_Cbs[j].onclick = function () {
                if (content_Cbs[j].checked) {

                } else {
                    if (fitstCb.checked) {
                        fitstCb.checked = false;
                    } else {

                    }
                    content_Cbs[j].checked = false;
                    content_Cbs[j].className = 'content_Cb';
                }
            }
        }


    </script>
</div>

</body>

</html>
